<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生词学习</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        function getMyWord() {
            $.ajax({
                url: 'getmyword?uid='+sessionStorage.getItem("uid"),
                type: 'get',
                success: function (words) {
                    var str = "";
                    for (var i = 0; i < words.length ;i++)
                    {
                        str += "<div class='box'>"+"<input type='checkbox' class='word' name='word' id='word-"+words[i].wid+"' value='"+words[i].wid+"'>"+
                            "<label for='word-"+i+"'>"+words[i].word+"&emsp;"+words[i].definition+"</label>"+"</div>";
                    }

                    document.getElementById("wordbox").innerHTML=str;
                },
                error: function () {
                    alert('服务器超时，请重试！');
                }
            })
        }

        getMyWord();

    </script>
    <style>
        body{
            background-image: url(../static/images/sheng.jpg);
            position: relative;
            height: 600px;
            background-repeat: no-repeat;
            background-color: #008081;
        }
        * {
            margin: 0px;
            padding: 0px;
            width: 38px;
            margin: 0px;
            padding: 0px;
        }
        #wordbox{
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 924px;
            height: 630px;
            overflow-y: scroll;
            overflow-x: hidden;
            top: 199px;
            left: 363px;
            border: 3px;
            /* border-width: 1px 2px 1px; */
            border: 3px solid #c0c0c0;

        }
        .box{
            width: 905px;
            height: 57px;
            font-size: 20px;
        }
        #btn{
            width: 160px;
            height: 80px;
            position: relative;
            top: 120px;
            left: 1320px;
        }
        #word{
            width: 60px;
            height: 60px;
        }
        #shan{
            width: 160px;
            height: 80px;
            position: relative;
            top: 5px;
            left: 1316px;
        }
        #fan{
            width: 160px;
            height: 80px;
            position: relative;
            top: 31px;
            left: 1316px;
        }




    </style>

</head>
<body>
<header>

</header>
<div id="big_box">
    <div id="wordbox">

    </div>
<!--    <input  id="btn" type="image" value="提交" onclick="getWord();getNewWord()" src="../static/images/page4.2.png">-->
</div>
<input type="image" id="shan"  src="../static/images/page4.2.1.png" onclick="Del()">
<input type="image" id="fan"  src="../static/images/page4.2.2.png" onclick="Return()">


<script>
    function Return(){
        window.location.href="first";
    }

    var wid=new Array();
    //实际情况中，json对象的值可通过document.getElementByName()来获取用户输入
    function Del() {
        //获取所有的表单选项
        var arr = document.getElementsByName("word");
        for (i in arr) {
            if (arr[i].checked) {  //勾上了
                wid.push(arr[i].value);
            }
        }
        // alert(wid);
        var json={
            "wid":wid
        }
        $.ajax({
            type: 'POST',
            data: JSON.stringify(json), //json
            contentType: 'application/json',
            dataType: 'json',
            url: 'delete?uid='+sessionStorage.getItem("uid"),
            success: function (resMap) {
                if(resMap['flag']=="success")
                {
                    // alert("删除成功!"+resMap['msg']);
                    window.location.href="learn";
                }

            },
            error: function () {
                alert("发送失败");
            }
        });
    }
</script>
</body>
</html>
